<template>
	<div>
		<el-button class="box">改变颜色</el-button>
		<Test ref="testRef" @change="change">
			<div>slot-default</div>
			<template #A>slot-A</template>
		</Test>
		<div class="div"></div>
		<ComputedCom />
	</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Test from './test.vue'
import ComputedCom from '../script-setup/computed.vue'
// InstanceType 可以获取组件暴露的属性方法
type TestInstance = InstanceType<typeof Test>
const testRef = ref<TestInstance>()
const color = ref('teal')

function change(e: string) {
	console.log(e)
}
onMounted(() => {
	console.log(testRef.value?.name) // pingan8787
})
</script>

<style scoped>
.box {
	/* 绑定颜色 */
	color: v-bind(color);
}

/* TODO 深度选择器 */
:deep(.slot-msg) {
	color: red;
}

/* TODO 查询插槽,不知怎么，我这里不生效 */
:slotted(.slot-msg) {
	color: red;
}

/* TODO 全局选择 */
:global(.slot-color) {
	color: red;
}
</style>
